<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石大蚊侦探 - 校园蚊情监测新思路</title>
    <link rel="stylesheet" href="styles.css">
</head>
</head>
<body>
<header>
    <h1>石大蚊侦探</h1>
    <p>校园蚊情监测新思路</p>
    <p>New Approach for Campus Mosquito Surveillance @ China University of Petroleum-Beijing</p>
</header>
<nav>
    <a href="index.html">首页</a>
    <a href="live.html">实时蚊情</a>
    <a href="arsenal.html">如何防蚊</a>
    <a href="ecology.html">蚊虫生态链</a>
    <a href="action.html">石大在行动</a>
    <a href="contact.html">联系我们</a>
    <a href="about.html">关于项目</a>
</nav>
<main>
    <h2>欢迎来到石大蚊侦探!</h2>
    <p>亲爱的师生们,石大蚊侦探是一个创新的校园蚊情监测项目,我们运用前沿技术,实现对校园内蚊虫活动的实时掌控,为大家带来全面的防蚊服务,共创清新宜人的校园环境!</p>
    <h3>项目特色</h3>
    <ul>
        <li>🔎 大数据可视化,校园蚊情尽在掌握</li>
        <li>🦟 最新防蚊知识和物资,助你科学高效灭蚊</li>
        <li>🌿 揭秘蚊虫的生态和疾病,提高防蚊意识</li>
        <li>💪 展现师生环境治理的行动和成果,携手共建美好校园</li>
    </ul>
</main>
<div id="back-to-top">⬆</div>
<footer>
    <a href="contact.html">联系我们</a> | <a href="about.html">关于项目</a>
    <p>Copyright © 2024 石大蚊侦探团队 All Rights Reserved.</p>
</footer>

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("back-to-top").style.display = "block";
        } else {
            document.getElementById("back-to-top").style.display = "none";
        }
    }

    document.getElementById("back-to-top").onclick = function() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
</body>
</html>